<template>
    <div style="position: relative;height: 426px;">
        <Transition name="fade">
            <ul class="goods-list" v-if="list.length">
                <li v-for="item in list" :key="item.id">
                    <RouterLink :to="`/product/${item.id}`">
                        <img v-lazy="item.picture" alt="">
                        <template v-if="type = 0">
                            <p class="name ellipsis">{{  item.name  }}</p>
                            <p class="price">&yen;{{  item.price  }}</p>
                        </template>
                        <template v-if="type = 1">
                            <p class="name ellipsis">{{  item.title  }}</p>
                            <p class="desc">{{  item.alt  }}</p>
                        </template>
                    </RouterLink>
                </li>
            </ul>
            <HomeSkeleton bg="#f0f9f4" v-else />
        </Transition>
    </div>
</template>

<script setup>
import HomeSkeleton from './home-skeleton.vue'
const props = defineProps({
    list: {
        type: Array,
        default: () => []
    },
    type: {
        type: Number,
        default: 0, //0： 新鲜好物  1：人气推荐
    }
})
</script>
<style lang='scss' scoped>
.goods-list {
    display: flex;
    justify-content: space-between;
    height: 406px;

    li {
        width: 306px;
        height: 406px;
        background: #f0f9f4;
        @extend .hoverShadow;

        img {
            width: 306px;
            height: 306px;
        }

        p {
            font-size: 22px;
            padding: 12px 30px 0 30px;
            text-align: center;
        }

        .price {
            color: $priceColor;
        }
    }
}

.fade {
    &-leave {
        &-active {
            position: absolute;
            width: 100%;
            transition: opacity .5s .2s;
            z-index: 1;
        }

        &-to {
            opacity: 0;
        }
    }
}
</style>